function InitDomFather() {
    let app = document.querySelector('#app')
    this.box = document.createElement('div')
    this.box.setAttribute('class', 'box')
    this.box.innerHTML = `<ul>
    <li class="active">电器</li>
    <li>手机</li>
    <li>服装</li>
</ul>`
    app.appendChild(this.box)
}

// 普通选项卡功能
InitDomFather.prototype.createTabDetail = function () {
    this.div = document.createElement('div')
    this.div.setAttribute('class', 'detail')
    this.div.innerHTML = `<div style="display: block;">这是电器栏</div>
    <div style="display: none;">这是手机栏</div>
    <div style="display: none;">这是服装栏</div>`
    this.box.appendChild(this.div)
    // 给tab栏添加事件
    this.lis = this.box.querySelectorAll('ul li')
    this.lis.forEach((item, index) => {
        item.num = index
        item.onclick = () => {
            this.hook(item.num)
        }
    })
}

// 下一页功能
InitDomFather.prototype.createNextPage = function () {
    this.createTabDetail()
    this.next = document.createElement('div')
    this.count = 1
    this.next.setAttribute('class', 'btn')
    this.next.innerHTML = `<span>下一页</span>`
    this.box.appendChild(this.next)
    document.querySelector('.btn').onclick = () => {
        this.count = this.hook(this.count)
    }
}

// 自动切换功能
InitDomFather.prototype.autoToggle = function () {
    this.createTabDetail()
    this.flag = 1
    setInterval(() => {
        this.flag = this.hook(this.flag)
    }, 2000)

}


// 排他思想(封装共用功能)
InitDomFather.prototype.hook = function (count) {
    this.lis = this.box.querySelectorAll('ul li')
    this.divs = this.div.querySelectorAll('div')
    this.lis.forEach((item, idx) => {
        item.classList.remove('active')
        this.divs[idx].style.display = 'none'
    })
    this.lis[count].classList.add('active')
    this.divs[count].style.display = 'block'
    count == 2 ? count = 0 : count++
    return count
}